<!--  -->
<template>
<div class='mytodos'>
  <div class="mytodos-heard">todos</div>
  <div class="mytodos-counter">
    <div class="mytodos-counter-top">
      <span  :class="['jiantou',{ allxuan: allchecbut }]" @click="pickAlltodos">=></span><input type="text" placeholder="What needs to be done" v-model="inputVal" @keyup.enter="saveTodo">
    </div>
    <div class="mytodos-counter-mid">
     <div class="mytodos-counter-list"
       v-for="(item,index) in filterTodos" 
      :key="item.id">
       <div class="list-left"><input type="checkbox" v-model="item.status"></div>
       <div :class="['list-center']" @dblclick="dblheard(index)">
         <p :class="['title',{hidden:dblitem_index === index},{zhonghuaxian:item.status}]">{{item.text}}</p>
         <input type="text" v-model="item.text" :class="['title',{hidden:dblitem_index != index}]" @blur="blurheard">
         </div>
       <div class="list-right" @click.stop="deletTodos(index)"><span >X</span></div>
     </div>
    </div>
    
  </div>
  <div class="mytodos-counter-down">
      <div class="counter-down-left"><span>{{remaining}}项剩余</span></div>
      <div class="counter-down-mid">
        <span @click="itemClickfn('all')" :class="['title',{active: zhuangtai ==='all'}]">全部</span>
        <span @click="itemClickfn('shengyu')" :class="['title',{active: zhuangtai ==='shengyu'}]">剩余</span>
        <span @click="itemClickfn('jihuo')" :class="['title',{active: zhuangtai ==='jihuo'}]">激活</span>
      </div>
      <div class="counter-down-right">
        <span @click="clearjihuo">清除激活</span>
      </div>
    </div>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {
 
 
},
data() {
//这里存放数据
return {
  zhuangtai:"all",
  //状态码
  dblitem_index:-1 ,   //-1未编辑  0正在编辑第0行
  // allchecbut:false,
  todos:[
    {
      text:"好困",
      status:false,
      id:1,
    },
    {
      text:"睡觉",
      status:true,
      id:"2"
    }
  ],
   inputVal:"",
};
},
//监听属性 类似于data概念
computed: {

  remaining:function(){
    let remainingTodos =this.todos.filter((v)=>{
      if(!v.status){
        return true
      }
    })
    return remainingTodos.length
  },
  filterTodos:function(){
    if(this.zhuangtai === "all"){
      return this.todos;

    }else if(this.zhuangtai ==="shengyu"){
      return this.todos.filter(v=>{
        return  !v.status
      })
    }else if(this.zhuangtai === "jihuo"){
      return this.todos.filter(v=>{
        return v.status;
      })
    }
  },
  allchecbut:function(){
    let checked = true;
    this.todos.map((v)=>{ 
      if(!v.status)
        checked = false
    })
    return checked;
  }
  
  
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  clearjihuo:function(){
    let activeTODOS =this.todos.filter(v=>{
      return !v.status
    })
    this.todos =activeTODOS
  },
  itemClickfn:function(zhuangtai){
    this.zhuangtai = zhuangtai ;
    // console.log(this.zhuangtai);
  }
  ,
  blurheard:function(){
   this.dblitem_index =-1 ;
  
  }
  ,
  dblheard:function(index){
        this.dblitem_index =index
        console.log("正在编辑"+index +"行")
  },
  //删除列表
  deletTodos:function(index){
    this.todos.splice(index,1);
  },
  pickAlltodos:function(){
    // allchecbut = true 
    let newTodos =JSON.parse(JSON.stringify(this.todos));
    newTodos.map((v)=>{
      v.status=true;
    });
    this.todos=newTodos;
  },

   saveTodo:function(){
     if(!this.inputVal){
       this.$message.error('输入不能为空');
       return false
     }else{
       this.todos.push({
         text:this.inputVal,
         status:false,
         id:Date.now()      
         })
       
     }

   }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
  

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less" scoped>
.mytodos {
  position: relative;
  // min-height:350px ; 
  width: 500px;
  border: 1px solid grey;
   margin: 0 auto;
  .mytodos-heard {
      height: 100px;
      text-align: center;
      line-height: 80px;
      font-size: 50px;
      color: rgb(139, 71, 71);
  }

  .mytodos-counter {
    border: 1px solid grey;
    .mytodos-counter-top {
      .allxuan{
        color: red;
      }
     
      display: flex;
      align-items: center;
       height: 80px;
       border-bottom: 1px solid grey;
      span {
        flex: 1;
        text-align: center;
        

      }

      input {
        flex: 8;
        height: 60px;
        border: 0;
        outline: none;
        font-size: 35px;
        
      }
      
    }
    .mytodos-counter-list:hover .list-right{
      display: block;
    }
    .mytodos-counter-list{
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
       .list-left{
         display: flex;
         align-items: center;
         justify-content: center;
           input{
             height: 16px;
             width: 16px;
            //  border-radius: 10px;
            
           }
       }
       .list-center{
         flex: 1;
         display: flex;
         p{
            padding: 0 20px;
              // background: chartreuse;
         }
         input{
           margin-left: 20px;
         }
         .hidden{
           display: none;
         }
       }
       .zhonghuaxian{
         color: grey;
         text-decoration: line-through;
       }
       .list-right{
         display: none;
         cursor: pointer;
       }
    }
  }
  .mytodos-counter-down {
    padding: 0 10px;
    height: 34px;
    width: 100%;
    // position: absolute;
    // bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  .counter-down-left {
    span {
     

    }
  }

  .counter-down-mid {
    .active{
      border: 1px solid pink;
    }
    span {
       margin-right: 8px;

    }
  }

  .counter-down-right {
    span {

    }
  }
}
}
</style>